<template>
  <div>
    <a-row
      v-show="item.isStep"
      type="flex"
      v-for="item in stepLists"
      :key="item.id"
      class="row-main"
    >
      <a-col span="4" class="row-main row-content">{{ item.name }}</a-col>
      <a-col
        v-if="item.children && item.children.length && item.children[0].isStep"
        style="flex:1 1 auto"
        class="row-main"
      >
        <MouldSytepDialogContent :stepLists="item.children" />
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "MouldSytepDialogContent",
  props: {
    stepLists: Array
  },
  data() {
    return {};
  }
};
</script>

<style scoped>
.row-main {
  border: rgb(28, 28, 29) 1px solid;
  /* min-width: 160px; */
  text-align: center;
  margin: -1px;
}
.row-content {
  padding: 4px 8px 4px 8px;
  align-self: center;
  border: 0;
}
</style>
